<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<button class="btn">按钮</button>
<ul class="list">
    <!-- list前面 -->
    <li>li 1</li>
    <li class="li2">li 2</li>
    <li>li 3</li>
    <!-- list末尾 -->
</ul>
<div class="box"></div>

<script>
// 获取元素
var btn = document.querySelector('.btn');
var list = document.querySelector('.list');
var li2 = document.querySelector('.li2');
var box = document.querySelector('.box');

// 给 btn 添加点击事件
btn.onclick = function (){
    // 创建li元素节点
    var newLi = document.createElement('li');
    // console.log( typeof newLi );// 'object'
    // console.log( newLi );// <li></li>

    /* // 创建文本节点
    var txt = document.createTextNode('new li');
    // console.log( typeof txt );// 'object'
    // console.log( txt );// 'new li'

    // 在元素节点末尾插入文本节点
    newLi.appendChild(txt); */

    // 直接给元素节点赋值
    newLi.innerText = 'new li';

    // 将newLi插入到list末尾
    // list.appendChild(newLi);

    // 将newLi插入到list前面
    // list.insertBefore(newLi,li2.previousElementSibling);
    // list.insertBefore(newLi,li2.parentNode.firstElementChild);
    // list.insertBefore(newLi,list.firstElementChild);
    // list.insertBefore(newLi,list.children[0]);

    // 使用newLi替换li2
    // list.replaceChild(newLi,li2);

    // 删除li2
    // list.removeChild(li2);
    // li2.parentNode.removeChild(li2);
    // li2.remove();// IE10+

    // 拷贝节点list
    var clone_list = list.cloneNode(false);// false代表浅拷贝（只拷贝元素本身，不拷贝子元素）
    //var clone_list = list.cloneNode(true);// true代表深拷贝（拷贝元素本身及子元素）
    box.appendChild(clone_list);
}
    
</script>
</body>
</html>